<template>
  <div id="map"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

onMounted(() => {
  var map = L.map("map").setView([51.505, -0.09], 13);

  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  }).addTo(map);

  L.marker([51.5, -0.09])
    .addTo(map)
    .bindPopup("A pretty CSS3 popup.<br> Easily customizable.")
    .openPopup();
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>
